<script setup lang='ts'>
  import { onMounted, reactive, ref, nextTick } from 'vue';
  import request from '@/api/index';
  import { activeStatus, finalsTimeSt, finalsTimeEt } from '@/pinia/getter';
  import { xmloading, xmtoast, getMD } from '@/utils/public'; 
  const lineBox = ref(),
  boxSelectRef = ref();
  const action = reactive({
    width:'0%',
    all_desc:'',
    day_desc:'',
    treasureChest:[] as Array<any>,
    taskList:[] as Array<any>
  })
  const getDaily_recharge = async()=>{
    const loading = xmloading()
    const res = await request.rechargeList()
    loading.close()
    const { day_mission_list=[], all_mission_list=[], daily_recharge_value=0, day_desc='', all_desc='' } = res?.data
    action.taskList = day_mission_list
    action.treasureChest = all_mission_list
    action.day_desc = day_desc
    action.all_desc = all_desc
    let selectKey = 0
    for(let i in all_mission_list) {
      const { complate=0 } = all_mission_list[i]
      if(complate) {
        selectKey = Number(i)
      }else {
        break
      }
    }
    nextTick(()=>{
      const { offsetWidth } = boxSelectRef.value[0]
      const lineBoxWidht = lineBox.value.offsetWidth - offsetWidth
      let width = (lineBoxWidht / 5) * (selectKey) +  (selectKey * 20)
      width > lineBoxWidht ? width = lineBoxWidht : ''
      action.width = width + 'px'
    })
  }
  const handleReceive = async(item:any = {})=>{
    if(activeStatus.value == 1) return xmtoast('活动暂未开始')
    if(activeStatus.value == 2) return xmtoast('活动已结束')
    const { complate=0, id } = item
    if(!complate) ( kk as any).pay()
    if(complate == 1) {
      const loading = xmloading('领取中')
      await request.rechargeGet({
        id,
      })
      loading.close()
      await getDaily_recharge()
      xmtoast('领取成功')
    }
  }
  onMounted(()=>{
    getDaily_recharge()
  })
</script>

<template>
  <div class="taskListBox">
    <div class="ticketTips">{{ action.all_desc }}</div>
    <div class="reward">
      <div class="rewardInfoBox" v-for="(item,key) in action.treasureChest" >
        <div class="rewardInfo">
          <div class="time">
            {{ key == 0 ?getMD(finalsTimeSt * 1000):key==action.treasureChest.length - 1?getMD(finalsTimeEt * 1000):'' }}
          </div>
          <div class="boxImage flex-end-center">
            <xmimg
              @click="handleReceive(item)"
              :src="item.complate == 2?'cashback/taskIcon2.png':'cashback/taskIcon1.png'"
              :class="[item.complate == 2?'openIcon':'boxIcon']" />
          </div>
          <div class="price flex-align-center">
            <xmimg src="icon1.png" class="iconImg" />
            <span>{{ item.award_value }}</span>
          </div>
          <div ref="boxSelectRef" :class="['butBack flex-align-center', item.complate ? 'selectBackColor':'']">
            <div :class="['dot',item.complate ? 'selectBackColor' :'']"></div>
            <xmimg v-if="item.complate" src="cashback/taskIcon3.png" class="iconImg" />
          </div>
          <dl class="integral">
            <dt>累计钻石</dt>
            <dd>{{ item.diamond }}</dd>
          </dl>
        </div>
      </div>
      <div v-if="action.treasureChest.length > 0" class="lineWidth">
        <div ref="lineBox" class="lineBack">
          <div class="process selectBackColor" :style="{'---width':action.width}"></div>
        </div>
      </div>
    </div>
    <div class="dayTaskListBorder">
      <xmimg src="cashback/titleimg.png" class="titleImg" />
      <div v-if="action.taskList.length > 0" class="dayTaskListBox">
          <div class="taskListBack">
            <div class="titleText">{{ action.day_desc }}</div>
            <div class="taskList">
              <div v-for="item in action.taskList" class="taskInfo flex-align-between">
                <span>{{ item.desc }}</span>
                <div
                  @click="handleReceive(item)"
                  :class="['but',['click','getClick','noClick'][item.complate] || '']"
                >{{ ['去充值','领取','已领取'][item.complate] }}</div>
              </div>
            </div>
          </div>
      </div>
    </div>
  </div>
</template>

<style lang='scss' scoped>
  .taskListBox {
    padding: 0 8px 0;
    .ticketTips {
      width: 327px;
      height: 45px;
      line-height: 45px;
      color: var(--taskTitleFontColor);
      font-size: 16px;
      font-weight: 500;
      text-align: center;
      margin: 26px auto 16px;
      background: var(--taskTitleBackImage);
      span {
        color: #FFD663;
      }
    }
    .reward { 
      position: relative;
      // margin: 0 auto;
      width: 100%;
      padding: 0 14px 0 8px;
      box-sizing: border-box;
      display: flex;
      .rewardInfoBox {
        width: 20%;
      }
      .rewardInfo {
        z-index: 2;
        position: relative;
        width: 56px;
        margin: 0 auto;
        .time {
          height: 14px;
          color: var(--dayTaskTimeFontColor);
          font-size: 12px;
          line-height: 14px;
          font-weight: 500;
          text-align: center;
          margin-bottom: 14px;
        }
        .boxImage {
          width: 56px;
          height: 48px;
          margin-bottom: 17px;
          .boxIcon {
            width: 43px;
            height: 40px;
            margin: 0 auto;
          }
          .openIcon {
            width: 100%;
            height: 100%;
          }
        }
        .price {
          .iconImg {
            width: 12px;
            height: 12px;
            margin-right: 2px;
          }
          span {
            color: var(--taskPriceFontColor);
            font-size: 12px;
            font-weight: 500;
          }
        }
        .butBack {
          width: 20px;
          height: 20px;
          margin: 6px auto 8px;
          border-radius: 100%;
          .dot {
            width: 12px;
            height: 12px;
            background: var(--taskLindDotColor);
            border-radius: 100%;
          }
          .iconImg {
            width: 100%;
            height: 100%;
          }
        }
        .integral {
          color: var(--taskintegralFontColor);
          font-weight: 500;
          text-align: center;
          dt {
            font-size: 10px;
            margin-bottom: 2px;
          }
          dd {
            font-size: 12px;
          }
        }
      }
      .lineWidth {
        z-index: 1;
        position: absolute;
        left: 0;
        bottom: 40px;
        width: 100%;
        height: 6px;
        padding: 0 42px 0 36px;
        box-sizing: border-box;
        .lineBack {
          width: 100%;
          height: 100%;
          background:var(--taskLineBackColor);
          border-radius: 6px;
          .process {
            width: var(---width);
            height: 100%;
          }
        }
      }
      .selectBackColor {
        background: var(--tastLineSelectColor) !important;
      }
    }
    .dayTaskListBorder {
      position: relative;
      margin-top: 50px;
      padding: 2px;
      background: var(--dayTaskListBorderColor);
      border-radius: 24px;
      .titleImg {
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        width: auto;
        height: 41px;
      }
      .dayTaskListBox {
        border-radius: 22px;
        // position: relative;
        box-sizing: border-box;
        background: var(--dayTaskListBoxBackColor);
        
        .taskListBack {
          width: 100%;
          padding: 36px 16px 18px;
          box-sizing: border-box;
          .titleImg {
            position: absolute;
          }
        }
        .titleText {
          width: 327px;
          height: 28px;
          line-height: 28px;
          color: var(--dayGetNumTextTitleColor);
          font-size: 14px;
          font-weight: 500;
          text-align: center;
          margin-top: 8px;
          background: var(--dayGetNumTextTitleBackColor);
        }
        .taskList {
          .taskInfo {
            height: 54px;
            margin-top: 8px;
            padding: 10px 10px 10px 16px;
            box-sizing: border-box;
            border-radius: 10px;
            background: var(--dayTaskInfoBackColor);
            span {
              color: var(--dayTaskInfoFontColor);
              font-size: 14px;
              font-weight: 500;
              line-height: 14px;
            }
            .but {
              width: 82px;
              height: 34px;
              line-height: 34px;
              font-size: 14px;
              font-weight: 500;
              text-align: center;
              border-radius: 17px;
              box-sizing: border-box;
            }
            .click {
              color: var(--dayTaskGoButFontColor);
              background: var(--dayTaskGoButBackColor);
              border: var(--dayTaskGoButBorder);
            }
            .getClick {
              color: var(--dayTaskClickButFontColor);
              font-weight: 600;
              background: var(--dayTaskClickButBackColor);
            }
            .noClick {
              background: var(--dayTaskNoButBackColor);
              color: var(--dayTaskNoButFontColor);
            }
          }
        }
    }
    }
  }
</style>